<!-- src/components/PdfPreview.vue -->
<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="90%"
    top="5vh"
    destroy-on-close
    @close="handleClose"
  >
    <div class="pdf-container">
      <!-- <el-scrollbar class="pdf-scrollbar"> -->
        <div class="pdf-content">
          <iframe
            v-if="pdfUrl"
            :src="pdfUrl"
            class="pdf-iframe"
            frameborder="0"
          ></iframe>
          <div v-else class="pdf-loading">
            <el-skeleton animated>
              <template #template>
                <el-skeleton-item variant="p" style="height: 400px" />
              </template>
            </el-skeleton>
          </div>
        </div>
      <!-- </el-scrollbar> -->
    </div>
    
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const visible = ref(false)
const pdfUrl = ref('')
const title = ref('PDF预览')

const open = (url: string, pdfTitle = 'PDF预览') => {
  pdfUrl.value = url
  title.value = pdfTitle
  visible.value = true
}

const handleClose = () => {
  visible.value = false
  pdfUrl.value = ''
}

defineExpose({
  open
})
</script>

<style scoped>
.pdf-container {
  height: 80vh;
}

.pdf-scrollbar {
  height: 100%;
}

.pdf-content {
  height: 100%;
}

.pdf-iframe {
  width: 100%;
  height: 100%;
}

.pdf-loading {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
